// paths

// We can't use absolute paths here, because those are dependent on Django's
// STATIC_URL setting. Instead, relative paths from the final location of the
// compiled CSS files are used.
// */

$static-root: '../../';
$images-root: $static-root + 'wagtailadmin/images/';
$font-root: '../../wagtailadmin/fonts/';

// grid settings
$grid-columns: 12;
$grid-gutter-width: 3%;
$grid-max-width: 1200px;
$grid-content-indent: 0.7;

$mobile-nice-padding: 20px;
$desktop-nice-padding: 50px;

// screen breakpoints
$breakpoint-mobile: 50em; // 800px
$breakpoint-desktop-small: 56.25em; // 900px
$breakpoint-desktop-large: 75em; // 1200px
$breakpoint-desktop-larger: 100em; // 1600px

// colours
$color-teal: #43b1b0;
$color-teal-darker: darken($color-teal, 10%);
$color-teal-dark: #246060;
$color-blue: #71b2d4;
$color-red: #cd3238;
$color-orange: #e9b04d;
$color-green: #189370;
$color-salmon: #f37e77;
$color-salmon-light: #fcf2f2;
$color-white: #fff;
$color-black: #000;

// darker to lighter
$color-grey-1: #333;
$color-grey-1-1: #404040;
$color-grey-2: #666;
$color-grey-3: #d9d9d9;
$color-grey-4: #e6e6e6;
$color-grey-5: #fafafa;

$color-menu-text: #cacaca; // was #aaa wich was too low contrast

$color-thead-bg: $color-grey-5;
$color-header-bg: $color-teal; // #ff6a58;
$color-fieldset-hover: $color-grey-5;
$color-input-border: $color-grey-4;
$color-input-focus: #f4fcfc;
$color-input-error-bg: #feedee;
$color-button: $color-teal;
$color-button-hover: $color-teal-darker;
$color-button-yes: $color-green;
$color-button-yes-hover: darken($color-button-yes, 8%);
$color-button-no: $color-red;
$color-button-no-hover: darken($color-button-no, 20%);
$color-button-warning: $color-orange;
$color-button-warning-hover: darken($color-orange, 20%);
$color-link: $color-teal;
$color-link-hover: $color-teal-dark;

$color-text-base: $color-grey-2;
$color-text-input: $color-grey-1;

// Color states
$color-state-live: #59b524;
$color-state-draft: #808080;
$color-state-absent: #ff8f11;
$color-state-live-draft: #43b1b0;

// Fonts
$font-sans: Open Sans, Arial, sans-serif;
$font-serif: Roboto Slab, Georgia, serif;

// misc sizing
$thumbnail-width: 130px;
$menu-width: 180px;
